<template>
	<view>
		<view class="goods" :class="type == 2 ? '' : ''">
			<template v-if="type == 1">

				<view @click="tan(item[$t('item.name')])" class="label divc">
					<!-- {{$t("货物名称")}} -->{{item[$t('item.name')]}}
				</view>
				<view v-show="item[$t('item.brand')]" @click="tan(item[$t('item.brand')])"
					style="background-color: rgb(255,114,0); border-radius: 10rpx;
				  padding: 5rpx; width: auto;max-width: 300rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;  font-size: 24rpx;  font-weight: 500; color: white;">
					{{item[$t('item.brand')]}}
				</view>


				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("发货地")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{replaceSpaceWithComma($t(item.hyd))}}
					</view>
				</view>

				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("单价")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						<text class="small" style="color:#e33a13;font-weight: bold;">{{item.desire_price}}
							{{$t(item.price_unit)}}/{{item[$t("item.number_unit")]}}</text>
					</view>
				</view>

				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("单件重量")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_weight)}} kg
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1; margin-bottom: 0rpx;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("单件体积")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_volume)}} m³
					</view>
				</view>


				<view v-show="is_parameter==false" style="width: 100%;height: 40px;position: relative;"
					v-if="parameter.length!=0">
					<view class="lineP" v-for="(it,ind) in parameter" :key="ind" v-if="parameter.length!=0&&ind==0"
						style="display: flex;border-bottom: 0rpx solid #ccc;margin-bottom: 0rpx;">
						<view class="label" :class="lang!='zh'?'ru_font':''"
							style="width:45%; font-weight: 500;padding-left: 20rpx;">
							{{ it.split(',')[0] }}
						</view>
						<view class="text underline" :class="lang!='zh'?'ru_font':''"
							style="width:55%; text-align: right;  padding-right: 20rpx;">
							{{ it.split(',')[1] }}
						</view>
					</view>

					<view @click="parameter_more"
						style="position: absolute;bottom: 0rpx;left: 0; text-align: center; width: 100%;font-size: 14px;">
						{{ $t('查看更多') }}
					</view>
				</view>
				<view v-show="is_parameter==true" style="width: 100%;height: auto;position: relative;"
					v-if="parameter.length!=0">
					<view class="lineP" v-for="(it,ind) in parameter" :key="ind" v-if="parameter.length!=0"
						style="display: flex;border-bottom: 0rpx solid #ccc;margin-bottom: 0rpx;">
						<view class="label" :class="lang!='zh'?'ru_font':''"
							style="width:45%; font-weight: 500;padding-left: 20rpx;">
							{{ it.split(',')[0] }}
						</view>
						<view class="text underline" :class="lang!='zh'?'ru_font':''"
							style="width:55%; text-align: right;  padding-right: 20rpx;">
							{{ it.split(',')[1] }}
						</view>
					</view>
					<view style="height: 30rpx;"></view>
					<view @click="parameter_more"
						style="position: absolute;bottom: 0rpx;left: 0; text-align: center; width: 100%;font-size: 14px;">
						↑
					</view>
				</view>




			</template>

			<template v-if="type == 2">

				<view @click="tan(item[$t('item.name')])" class="label divc">
					{{item[$t('item.name')]}}
				</view>
				<view class="brand_view" v-if="item[$t('item.brand')]" @click="tan(item[$t('item.brand')])">
					<text
						style="padding: 5px 10px;	background-color: rgb(255,114,0); "><text>{{item[$t('item.brand')]}}</text></text>
				</view>


				<view class="flexImg">

					<block v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null))">
						<u-image width="300rpx" height="300rpx" :border-radius="20" :src="toImages(item.logo)"
							@click="lookat(item.logo)">
						</u-image>
					</block>
					<block v-else>
						<u-image width="300rpx" height="300rpx" :border-radius="20" v-if="i"
							v-for="(i,j) in storeImages(1, item.buy_images)" :key="j" :src="toImages(i)"
							@click="lookat(i)">
						</u-image>
					</block>


					<view class="imgFlex" style="position: relative;">
						<view style="position: absolute; bottom: 0rpx; left: 0rpx;">
							<view class="ui-item" style="border: 0px;">
								<view class="ui-video" v-for="(itemFile,indexFile) in item.buy_videos" :key="indexFile">

									<video style="width:320rpx;height:290rpx;margin-top: 5rpx;font-size: 10px;"
										v-if="indexFile==0" loop :initial-time="0" :id="'myVideo' + indexFile"
										:enable-play-gesture="true" object-fit="cover" :src="ImageUrl(itemFile)"
										:poster="ImageUrl(itemFile) + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"></video>

								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="lineP">
					<view class="label">{{$t("品牌")}}</view>
					<view class="text underline">
						{{item[$t('item.brand')]}}
					</view>
				</view> -->
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("货物到达地")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right; font-weight: bold;  padding-right: 20rpx;">
						{{replaceSpaceWithComma($t(item.shd))}}
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("期望单价")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">

						<text class="small" style="color:#e33a13;font-weight: bold;">
							<text v-if="item.desire_price">
								{{item.desire_price}} {{$t(item.price_unit)}}/{{item[$t("item.number_unit")]}}
							</text>
							<text v-else>
								{{$t("等待报价")}}
							</text>
						</text>
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("大概总重量")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_weight)}} kg
					</view>
				</view>

				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #f1f1f1;margin-bottom: 0rpx;">
					<view class="label" :class="lang!='zh'?'ru_font':''"
						style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("大概总体积")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''"
						style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_volume)}} m³
					</view>
				</view>


				<view v-show="is_parameter==false" style="width: 100%;height: 40px;position: relative;"
					v-if="parameter.length!=0">
					<view class="lineP" v-for="(it,ind) in parameter" :key="ind" v-if="parameter.length!=0&&ind==0"
						style="display: flex;border-bottom: 0rpx solid #ccc;margin-bottom: 0rpx;">
						<view class="label" :class="lang!='zh'?'ru_font':''"
							style="width:45%; font-weight: 500;padding-left: 20rpx;">
							{{ it.split(',')[0] }}
						</view>
						<view class="text underline" :class="lang!='zh'?'ru_font':''"
							style="width:55%; text-align: right;  padding-right: 20rpx;">
							{{ it.split(',')[1] }}
						</view>
					</view>

					<view @click="parameter_more"
						style="position: absolute;bottom: 0rpx;left: 0; text-align: center; width: 100%;font-size: 14px;">
						{{ $t('查看更多') }}
					</view>
				</view>
				<view v-show="is_parameter==true" style="width: 100%;height: auto;position: relative;"
					v-if="parameter.length!=0">
					<view class="lineP" v-for="(it,ind) in parameter" :key="ind" v-if="parameter.length!=0"
						style="display: flex;border-bottom: 0rpx solid #ccc;margin-bottom: 0rpx;">
						<view class="label" :class="lang!='zh'?'ru_font':''"
							style="width:45%; font-weight: 500;padding-left: 20rpx;">
							{{ it.split(',')[0] }}
						</view>
						<view class="text underline" :class="lang!='zh'?'ru_font':''"
							style="width:55%; text-align: right;  padding-right: 20rpx;">
							{{ it.split(',')[1] }}
						</view>
					</view>
					<view style="height: 30rpx;"></view>
					<view @click="parameter_more"
						style="position: absolute;bottom: 0rpx;left: 0; text-align: center; width: 100%;font-size: 14px;">
						↑
					</view>
				</view>


				<!-- <view class="lineP">
					<Tag :text="item[$t('item.goods_weight')] + ' kg'" color="#13b5b1"></Tag>
					<Tag :text="item[$t('item.goods_volume')] + ' m³'" color="#13b5b1" :plain="true"></Tag>
				</view> -->
			</template>
		</view>

		<Avatar v-if="type==1" :info="item.user" :type="type"></Avatar>


		<view class="goods" v-if="type==1" :class="type==1?'white':'yellow'">
			<ProductWHL :item="item" :type="type"></ProductWHL>
		</view>
	</view>
</template>

<script>
	import Tag from '@/components/Tag.vue'
	import ProductWHL from '@/components/ProductWHL.vue'
	import Avatar from '../../../../components/detail/Avatar.vue'

	import {
		ImageUrl,
		isBase64
	} from "@/common/public";
	import {
		IMAGE_URL
	} from '@/config/app'
	export default {
		props: {
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: 1,
			},
		},
		components: {
			Tag,
			Avatar,
			ProductWHL
		},
		computed: {
			toImages() {
				return (src) => {
					if (src.indexOf('http') != '-1') {
						return IMAGE_URL + src
					} else {
						return isBase64(src) ? src : IMAGE_URL + src
					}
				}
			},
			storeImages() {
				return (sum, images) => [images[0]]
			},
		},
		mounted() {

			if (this.lang === 'zh') {
				var parameters = this.$t(this.item.parameter)
				if (parameters) {
					this.parameter = parameters.split(';')
				}
			} else {
				var parameters = this.$t(this.item.parameter_ru)
				if (parameters) {
					this.parameter = parameters.split(';')
				}
			}

		},
		methods: {
			ImageUrl,
			replaceSpaceWithComma(str) {
				str = str.replace(/-/g, ',');
				str = str.replace(/^[,]+|[,]+$/g, '');
				return str;
			},
			tan(content) {
				uni.showModal({
					content: content,
					showCancel: false,
					confirmText: this.$t('是'),
				})
			},
			parameter_more() {
				if (this.is_parameter == false) {
					this.is_parameter = true
				} else {
					this.is_parameter = false
				}
			},
			lookat(img) {
				uni.previewImage({
					urls: [IMAGE_URL + img],
				})
			}
		},
		data() {
			return {
				is_parameter: false,
				lang: getApp().globalData.lang,
				parameter: []
			};
		}
	}
</script>

<style lang="scss" scoped>
	video::-webkit-media-text-track-display {
		font-family: 'Arial', sans-serif;
		font-size: 10px;
		color: white;
	}

	.white {
		background-color: white;
	}

	.yellow {
		background-color: #fefcf6;
	}

	.divc {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods {
		width: 90%;
		box-shadow: 0 0 10px #ddd;
		border-radius: 10px;
		padding: 10px 12px;
		margin: 0 auto;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		background-color: #fff;

		&.yellow {
			background: #fff;
		}

		.price {
			color: #e71818 !important;
			font-size: 50rpx;

			.small {
				font-size: 30rpx;
				padding-left: 10rpx;
			}
		}

		.underline {
			border-bottom: 0rpx solid #ccc;
			padding-bottom: 10rpx;
		}

		.label {
			font-weight: 800;
			margin-bottom: 10rpx;
		}

		.text {
			color: #666;
			margin-top: 0rpx;
		}

		.lineP {
			margin: 20rpx 0 30rpx 0;
		}

		.ru_font {
			font-size: 20rpx !important;
		}

		.flexImg {
			display: flex;
			align-items: stretch;
			flex-direction: row;
			justify-content: space-evenly;

			.imgFlex {
				flex: 1;
				margin-left: 5px;
				display: flex;
				flex-direction: column;
				//justify-content: space-between;
			}
		}
	}

	.brand_view {
		border-radius: 10rpx;
		padding: 5rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 24rpx;
		font-weight: 500;
		color: white;
	}
</style>